<script setup lang='ts'>
import { ref, reactive, onMounted, computed } from "vue";
import Delete from "@iconify-icons/ep/delete";
import Edit from "@iconify-icons/ep/edit";
import Plus from "@iconify-icons/ep/plus";
import {
  getProjectList,
  runProject,
  checkRun,
  stopProject,
  getYamlConfig,
  isOpenMonitor,
  getMonitorStatus,
  getDistributedValues,
  getActiveMachines,
  updateDistributedValue,
  deleteScenario,
  addScenario,
  updateScenario,
  updateTime
} from "@/api/file";
import { ElMessage } from "element-plus";
import AddDialog from "../run/addDialog.vue";

defineOptions({
  name: 'yamlConfig'
})

const props = defineProps(["yamlConfig", "pagination", "projectName"]);
const emits = defineEmits(["getYaml", "handleSizeChange", "handleCurrentChange", "handleSelectionChange"]);

const dialogVisible = ref(false);
const dialogEdittime = ref(false);
const dialogEdit = ref(false);
const loading = ref(false);

const editForm = reactive({
  "scenario": "",
  "concurrency": 1,
  "targettime": 1,
  "ramp-up": 1
});

const edittimeForm = reactive({
  "Runtime": 1,
});

const getYaml = () => {
  emits('getYaml')
}

const handleEdittime = async row => {
  edittimeForm.Runtime = row;
  dialogEdittime.value = true;
};

const handleDel = async (row: { scenario: string }) => {
  try {
    loading.value = true;
    const res = await deleteScenario({
      projectName: props.projectName,
      scenarioName: [row.scenario]
    });
    loading.value = false;
    if (res.success) {
      getYaml();
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

const handleEdit = async row => {
  editForm.scenario = row.scenario;
  editForm.targettime = row.targettime;
  editForm.concurrency = row.concurrency;
  editForm["ramp-up"] = row["ramp-up"];
  dialogEdit.value = true;
};

const dialogEdittimeConfirm = async () => {
  try {
    dialogEdittime.value = false
    const res = await updateTime({
      projectName: props.projectName,
      data: edittimeForm
    });
    if (res.success) {
      ElMessage.success("修改成功");
      getYaml();
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    ElMessage.error(error);
  }
}

const handleAdd = async (scenarioName: string[]) => {
  try {
    loading.value = true;
    const res = await addScenario({
      projectName: props.projectName,
      scenarioName: scenarioName
    });
    loading.value = false;
    if (res.success) {
      getYaml();
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};


const dialogEditConfirm = async () => {
  try {
    dialogEdit.value = false
    const res = await updateScenario({
      projectName: props.projectName,
      data: editForm
    });
    if (res.success) {
      ElMessage.success("修改成功");
      getYaml();
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    ElMessage.error(error);
  }
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  emits('handleSizeChange', val)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  emits('handleCurrentChange', val)
}

const handleSelectionChange = (val) => {
  emits('handleSelectionChange', val)
}
</script>

<template>
  <el-descriptions border>
    <el-descriptions-item label="场景执行时长(s)" width="300px">
      {{ yamlConfig.runtime }}
      <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
        <el-button circle size="small" type="primary" class="float-right mx-[44px]"
          @click="handleEdittime(yamlConfig.runtime)">
          <IconifyIconOffline :icon="Edit" />
        </el-button>
      </el-tooltip>
    </el-descriptions-item>
  </el-descriptions>
  <el-table :data="yamlConfig.execution" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="scenario" label="场景名" />
    <el-table-column prop="concurrency" label="并发数" align="center" />
    <el-table-column prop="ramp-up" label="用户加载时间(s)" align="center" />
    <el-table-column prop="targettime" label="响应时间指标(ms)" align="center" />
    <el-table-column fixed="right" label="操作" width="100" align="center">
      <template #default="scope">
        <el-space class="item-action">
          <el-popconfirm title="你确定要删除此项吗?" width="200" @confirm="handleDel(scope.row)">
            <template #reference>
              <div>
                <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                  <el-button circle size="small" type="danger">
                    <IconifyIconOffline :icon="Delete" />
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-popconfirm>
          <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
            <el-button circle size="small" type="primary" @click="handleEdit(scope.row)">
              <IconifyIconOffline :icon="Edit" />
            </el-button>
          </el-tooltip>
        </el-space>
      </template>
    </el-table-column>
  </el-table>
  <div class="flex items-center justify-between">
    <el-pagination background layout="sizes, prev, pager, next, total" :total="pagination.total" :default-page-size="10"
      :current-page="pagination.pageNum" @update:current-page="handleCurrentChange" @size-change="handleSizeChange" />
    <el-tooltip class="box-item" effect="dark" content="新增场景" placement="top">
      <el-button type="primary" size="small" @click="dialogVisible = true" class="float-right mr-[27px]">添加
      </el-button>
    </el-tooltip>
  </div>
  <AddDialog v-model="dialogVisible" :projectName="projectName" @submit="handleAdd" />
  <el-dialog v-model="dialogEdit" title="编辑">
    <el-form :model="editForm" label-width="auto">
      <el-form-item label="场景名">
        <el-input v-model="editForm.scenario" :value-on-clear="0" :min="0" :disabled="true" />
      </el-form-item>
      <el-form-item label="并发数">
        <el-input-number v-model="editForm.concurrency" :value-on-clear="0" :min="0" />
      </el-form-item>
      <el-form-item label="用户加载时间">
        <el-input-number v-model="editForm['ramp-up']" :value-on-clear="0" :min="0" />&nbsp s
      </el-form-item>
      <el-form-item label="响应时间指标">
        <el-input-number v-model="editForm.targettime" :value-on-clear="0" :min="0" />&nbsp ms
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEdit = false">取消</el-button>
        <el-button type="primary" @click="dialogEditConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogEdittime" title="编辑">
    <el-form :model="edittimeForm" label-width="auto">
      <el-form-item label="场景执行时长(s)">
        <el-input-number v-model="edittimeForm.Runtime" :value-on-clear="0" :min="0" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEdittime = false">取消</el-button>
        <el-button type="primary" @click="dialogEdittimeConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang='scss' scoped></style>
